<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: url(../img/1.jpg) no-repeat 0 0/cover;
        }

        header {
            height: 50px;
            background-color: black;
            display: flex;
            justify-content: end;
            align-items: center;
            color: white;
            padding-right: 20px;
        }

        .container {
            background-color: rgba(255, 255, 255, 0.3);
            width: 600px;
            height: 400px;
            /* margin-top: 200px; */
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            border: 1px solid #e5e5e5;
            border-radius: 6px;
            color: aliceblue;
        }

        .container:hover {
            box-shadow: white 0px 0px 20px;
        }

        .container input {
            background-color: rgba(255, 255, 255, 0.6);
        }

        .title-p {
            width: 100%;
            text-align: center;
            font-size: 20px;
            font-weight: 550;
        }

        .register-box {
            margin-top: 50px;
        }

        .tips {
            margin-left: 10px;
        }

        .form-group {
            margin-bottom: 15px;
            margin-left: 5%;
        }

        .control-label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 700;
        }

        .form-control {
            display: block;
            width: 90%;
            height: 34px;
            /* padding: 6px 12px; */
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .modal-footer {
            display: flex;
            width: 100%;
            justify-content: center;
        }

        .btn {
            color: #fff;
            background-color: rgb(184, 183, 183);
            border-radius: 4px;
            border-color: transparent;
            margin-right: 30px;
            width: 150px;
            height: 30px;
            font-size: 20px;
            margin-top: 14px;
        }

        .btn:hover {
            box-shadow: aqua 0px 0px 10px;
            color: aqua;
        }

        .close {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            float: right;
            font-size: 34px;
            border: none;
        }

        .close:hover {
            box-shadow: aqua 0px 0px 10px;
            color: aqua;
        }
    </style>
</head>

<body>


    <div class="container">
        <button class="close">×</button>
        <form class="register-box">
            <p class="title-p">修改密码</p>
            <div class="form-group">
                <label for="recipient-name" class="control-label">原密码:</label>
                <input type="text" class="form-control" id="oldPassword">
            </div>
            <div class="form-group">
                <label for="recipient-name" class="control-label">新密码:</label>
                <input type="text" class="form-control" id="newPassword">
            </div>
            <div class="form-group">
                <label for="recipient-name" class="control-label">确认密码:</label>
                <input type="text" class="form-control" id="rNewPassword">
            </div>
        </form>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary">修改</button>
        </div>
    </div>



    <script src="../js/tool.js"></script>

    <script>
        class Editpassword {
            constructor() {
                this.oldpassword = document.querySelector('#oldPassword');
                this.newpassword = document.querySelector('#newPassword');
                this.rnewpassword = document.querySelector('#rNewPassword');
                this.btn = document.querySelector('.btn');
                this.close = document.querySelector('.close')
                this.container = document.querySelector('.container')
                this.rules = [
                    {
                        name: this.oldpassword,
                        rule: /^.{6,}$/i,
                        message: '原密码错误'
                    },
                    {
                        name: this.newpassword,
                        rule: /^.{6,}$/,
                        message: '密码错误'
                    },
                    {
                        name: this.rnewpassword,
                        rule: /^.{6,}$/,
                        message: '重复密码密码错误'
                    },
                ];
                this.init();
            }

            init() {
                this.HandlePassword();
                this.handleTest()
                this.HandleClose()
            }

            // 正则格式验证
            handleTest() {
                let that = this
                this.rules.forEach(function (it) {
                    // console.log(this);
                    it.name.onblur = () => {
                        // console.log(that);
                        that.handlecheck(it.name, it.rule, it.message)
                    }
                })
            }
            // 封装验证的方法 
            handlecheck(ele, reg, message) {
                // 在每一次验证之前都清除提示 
                ele.nextElementSibling ? ele.nextElementSibling.remove() : ''

                // 正则验证    
                let res = reg.test(ele.value)
                if (!res) {
                    // 表示验证不通过 
                    var p = document.createElement('p')
                    p.innerHTML = message
                    p.className = 'tips'
                    ele.parentNode.appendChild(p)
                    return false
                }
                return true
            }
            HandleClose() {
                this.close.onclick = () => {
                    // location.href = './home.html'
                }
            }

            HandlePassword() {
                this.btn.onclick = async () => {
                    let params = {
                        url: '/users/editpassword',
                        query: {
                            id: cookie.getItem('userId'),
                            oldpassword: this.oldpassword.value,
                            newpassword: this.newpassword.value,
                            rnewpassword: this.rnewpassword.value
                        }
                    }
                    let res = await axios.post(params);
                    console.log(res);
                    if (res.code == 1) {
                        alert('已修改成功！');
                        location.href = './login.html'
                    } else {
                        alert(res.message);
                    }
                }
            }
        }
        new Editpassword();

    </script>

</body>

</html>